<template>
    <div>
        <header-top>
            <template #search>
                <router-link :to="{path:'/search/geohash',query:{geohash:geohash}}" class="link_search">
                        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
                            <circle cx="8" cy="8" r="7" stroke="rgb(255,255,255)" stroke-width="1" fill="none"/>
                            <line x1="14" y1="14" x2="20" y2="20" style="stroke:rgb(255,255,255);stroke-width:2"/>
                        </svg>
                </router-link>
            </template>
            <template #msite-title>
                <router-link to="/" class="msite_title">
                    <span class="title_text ellipsis">{{msiteTitle}}</span>
                </router-link> 
            </template>
        </header-top>
        <nav class="msite_nav">
            <div class="swiper-container" v-if="foodTypes.length">
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide food_types_container" v-for="(item,index) in foodTypes" :key="index">
                        <router-link v-for="food in item" :key="food.id" class="link_to_food"
                            :to="{path: '/food', query: {geohash, title: food.title, restaurant_category_id: getCategoryId(food.link)}}">
                            <figure>
                                <img :src="imgBaseUrl+food.image_url" alt="">
                                <figcaption>{{food.title}}</figcaption>
                            </figure>    
                        </router-link>
                    </div>
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <img :src="placeSvg" class="fl_back animation_opactiy" v-else>
        </nav>
        <div class="shop_list_container">
            <header class="shop_header">
                <svg class="shop_icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shop"></use>
                </svg>
                <span>附近商家</span>
            </header>
            <shop-list v-if="hasGetData" :geohash="geohash"></shop-list>
        </div>
        <FootGuide :geohash="geohash"></FootGuide>
    </div>
</template>

<script>
// import HeaderTop from '../../components/header/HeaderTop'
import {mapState,mapActions} from 'vuex' 
import {msiteAddress,msiteFoodTypes} from '../../api/getData'
import ShopList from '../../components/common/shopList'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import img from '../../assets/imgs/fl.svg'
import FootGuide from '../../components/footer/FootGuide'
export default {
    components:{
        // HeaderTop,
        ShopList,
        FootGuide
    },
    computed:{
        
    },
    data(){
        return {
            geohash:'',
            msiteTitle:'请选择地址', // msite页面头部标题,
            hasGetData:false, // 是否已经获取地理位置数据，成功之后再获取商铺列表信息,
            foodTypes: [], // 食品分类列表
            imgBaseUrl: 'https://fuss10.elemecdn.com', //图片域名地址
            placeSvg: img
        }
    },
    async beforeMount(){
        this.geohash=this.$route.query.geohash;
        // save geohash
        this.saveGeohash(this.geohash)
        const res =await msiteAddress(this.geohash);
        this.msiteTitle=res.name;
        // vuex 保存 经纬度信息
        this.saveLoaction(res);
        this.hasGetData=true;
    },
    mounted(){
        msiteFoodTypes(this.geohash).then(res=>{
            const length = Math.ceil(res.length/8);
            const arrRes = [...res];
            const newRes = [];
            for(let i=0;i<length;i++){
                newRes.push(arrRes.splice(0,8))
            }
            this.foodTypes=newRes;
            // setTimeout(()=>{
            //     this.foodTypes=newRes;
            // },2000)
        }).then(()=>{
            new Swiper ('.swiper-container', {
                // Optional parameters
                direction: 'horizontal',//horizontal
                loop: true,
                pagination: {
                el: '.swiper-pagination',
                }
            })
        })
    },
    methods:{
        ...mapActions(['saveGeohash','saveLoaction']),
        getCategoryId(link){
            let urlData = decodeURIComponent(link.split('=')[1].replace('&target_name',''));
            if (/restaurant_category_id/gi.test(urlData)) {
    			return JSON.parse(urlData).restaurant_category_id.id
    		}else{
    			return ''
    		}
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.link_search{
    @include wh(.9rem,.9rem);
    @include ct;
    left: .8rem;
}
.msite_title{
    @include center;
    width: 50%;
    color: #fff;
    text-align: center;
    margin-left: -0.5rem;
    .title_text{
        @include sc(0.8rem, #fff);
        text-align: center;
        display: block;
    }
}
.msite_nav{
    padding-top: 2.1rem;
    background: #fff;
    height: 10.6rem;
    border-bottom: 0.025rem solid $bc;
    .swiper-container{
        @include wh(100%,100%);
        padding-bottom: 0.6rem;
        .swiper-pagination{
            bottom: .2rem;
        }
    }
    .fl_back {
        @include wh(100%,100%);
    }
}
.food_types_container{
    display: flex;
    flex-wrap: wrap;
    .link_to_food{
        width: 25%;
        padding: .3rem 0;
        @include fj(center);
        figure{
            img{
                @include wh(1.8rem,1.8rem);
            }
            figcaption{
                text-align: center;
                @include sc(0.55rem,#333);
            }
        }
    }
}
.shop_list_container {
    background: #fff;
    margin-top: .4rem;
    border-top: 0.025rem solid $bc;
    padding-bottom: 2rem;
    
    .shop_header{

        .shop_icon{
            fill: #999;
            vertical-align: middle;
            margin-left: 0.6rem;
            @include wh(0.6rem,0.6rem);
        }
        span{
            color: #666;
            @include font(0.55rem,1.6rem)
        }
    }
}
</style>